import React,{Component} from 'react'
import './myself.css'
import { Icon ,Modal} from 'antd';
import * as api from '../../api/userInfo'
import * as pros from '../../api/detailPro'
import Order from './Order'
const {confirm} = Modal
export default class Myself extends Component{
    constructor(props){
        super(props)
        this.state={
            userInfo:'',
            products:[]
        }
    }
    componentDidMount(){
        api.UserInfo().then(data=>{
            this.setState({
                userInfo:data.data
            })
        }).catch(rej=>{
            confirm({
                title: '温馨提示',
                content: '请登录',
                onOk() {
                    window.location.href="#/login"
                },
                onCancel() {
                    window.location.href="/home"
                },
            });
        })
        pros.getProduct({per:1000}).then(data=>{
            let arr = data.data.products
            let product = []
            console.log(arr)
            for(let i=0;i<4;i++){
                let index = parseInt(Math.random()*data.data.totalCount)
                product.push(arr[index])
            }
            this.setState({
                products:product
            })
        })
    }
    render(){
        return(
            <div className="myself_main">
                <div className="my_aside">
                    <div className="my_name">
                        <h3>{this.state.userInfo.userName}</h3>
                        <Icon type="qrcode" />
                        <p>普通会员:V36268868</p>
                        <a href="#">了解会员福利</a>
                    </div>
                    <dl class="infoEdit">
                        <dt>订单管理</dt>
                        <dd><a>订单信息</a><a>门店订单</a></dd>
                        <dt>交互中心</dt>
                        <dd><a>我的评论</a><a>我的消息</a></dd>
                        <dt>交互中心</dt>
                        <dd><a>我的积分</a><a>积分兑换</a><a>我的优惠券</a></dd>
                        <dt>我的账号</dt>
                        <dd><a>个人信息</a><a>绑定VIP</a><a>地址管理</a><a>更换手机绑定</a><a>修改密码</a></dd>
                        <dt>FAQ</dt>
                        <dd><a>购物</a><a>支付</a><a>配送货</a><a>退换货</a></dd>
                    </dl>
                </div>
                <div className="myself_content">
                    <div className="my_score">
                        <dl>
                            <dt>积分<p>了解积分规则</p></dt>
                            <dd>0</dd>
                        </dl>
                        <dl>
                            <dt>优惠券</dt>
                            <dd>0</dd>
                        </dl>
                        <div className="my_score_vip">
                            <p>vip:<span>立即绑定</span></p>
                            <p>资料完善度:<span><b></b></span>立即完善</p>
                        </div>
                    </div>
                    <div className="my-title">
                        <h3>我的订单</h3>
                        <a style={{color:'#888'}}>more</a>
                    </div>
                    <div className="myHomeOrderList">
                        <Order />
                    </div>
                    
                    <div className="my_item">
                        <h3>新款推荐</h3>
                        <div className="my_item_pro">
                            <ul className="item_list">
                                {
                                    this.state.products.map((v,i)=>{
                                       return(
                                            <li key={i}>
                                                <img src={v.coverImg}/>
                                                <p>{v.name}</p>
                                                <p>￥{v.price}</p>
                                            </li>
                                        )
                                    })
                                }
                            </ul>
                        </div> 
                    </div>
                </div>
            </div>
        )
    }
}